<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>resume</title>
		<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
		<link rel="stylesheet" href="css/reset.css" />
		<link rel="stylesheet" href="css/swiper.min.css" />
		<link rel="stylesheet" href="css/animate.min.css" />
		<link rel="stylesheet" href="css/style.css" />
		<script type="text/javascript" src="js/rem.js"></script>
	</head>
	<body>
		<!-- Swiper -->
		<div class="swiper-container">
			<div class="swiper-wrapper">
			  <div class="swiper-slide s1">
			  	<section class="banner-wrap">
			  		<img src="images/banner.jpg" alt="" width="100%"
				  		class="ani s1-banner"
				  		swiper-animate-effect="fadeInUp" 
				  		swiper-animate-duration="0.5s" 
				  		swiper-animate-delay="0.3s"	
				  	 />
				  	 <p class="ani banner-text" 
				  		swiper-animate-effect="fadeIn" 
				  		swiper-animate-duration="0.5s" 
				  		swiper-animate-delay=".8s">
				  		<span
				  	 		class="ani"
			  				swiper-animate-effect="fadeInDown" 
			  				swiper-animate-duration="0.5s" 
			  				swiper-animate-delay="1.2s"
				  	 		>PERSONAL RESUME</span>
			  			<i class="vm-line vm-line-left ani"
			  				swiper-animate-effect="fadeInLeft" 
			  				swiper-animate-duration="0.5s" 
			  				swiper-animate-delay="1.2s"
			  				
			  				></i>
			  			<i class="vm-line vm-line-right ani"
			  				swiper-animate-effect="fadeInRight" 
			  				swiper-animate-duration="0.5s" 
			  				swiper-animate-delay="1.5s"></i>
				  	 	
				  	 
				  	 </p>
				  	 <div class="banner-wrap-footer ani" 
				  		swiper-animate-effect="fadeIn" 
				  		swiper-animate-duration="2s" 
				  		swiper-animate-delay="1s"></div>
			  	</section>
			  	<section class="s1-title ani"
		  				swiper-animate-effect="fadeInDown" 
		  				swiper-animate-duration="1s" 
		  				swiper-animate-delay="1s">
			  		<img src="images/s1/resume-text.png" alt="" width="100%"
			  			 />
			  		<i class="c-block cb-red ani"
		  				swiper-animate-effect="slideInDown" 
		  				swiper-animate-duration="1s" 
		  				swiper-animate-delay="2s"></i>
			  		<i class="c-block cb-blue ani"
		  				swiper-animate-effect="slideInUp" 
		  				swiper-animate-duration="1s" 
		  				swiper-animate-delay="2s"></i>
			  		<i class="c-block cb-yellow ani"
		  				swiper-animate-effect="slideInDown" 
		  				swiper-animate-duration="1s" 
		  				swiper-animate-delay="2s"></i>
			  		<i class="c-block cb-green ani"
		  				swiper-animate-effect="slideInUp" 
		  				swiper-animate-duration="1s" 
		  				swiper-animate-delay="2s"></i>
			  	</section>
			  	<section class="s1-info">
			  		<div class="header">
			  			<h3 class="ani"
			  				swiper-animate-effect="fadeInDown" 
			  				swiper-animate-duration="0.5s" 
			  				swiper-animate-delay="2s">HELLO 我是 刘鹏</h3>
			  		</div>
			  		<div class="info-wrap ani"
			  				swiper-animate-effect="fadeInUp" 
			  				swiper-animate-duration="0.5s" 
			  				swiper-animate-delay="2s">
			  			<div class="head-img">
			  				<img src="images/s1/headImg.png" alt="" width="100%" />
			  			</div>
			  			<div class="info-text">
			  				<div class="text-line line1">
			  					<span>前端开发 | 本科&nbsp;</span>	
			  					<img src="images/s1/man.png" alt="" />
			  				</div>
			  				<div class="text-line line2 clearfix">			  					
		  						<p>
		  							<span class="ani"
						  				swiper-animate-effect="fadeInLeft" 
						  				swiper-animate-duration="0.5s" 
						  				swiper-animate-delay="2.5s">勤奋</span>
					  			</p>
		  						<p>
		  							<span class="ani"
						  				swiper-animate-effect="fadeInRight" 
						  				swiper-animate-duration="0.5s" 
						  				swiper-animate-delay="2.5s">踏实</span>
		  						</p>
		  						<p>
		  							<span class="ani"
						  				swiper-animate-effect="fadeInLeft" 
						  				swiper-animate-duration="0.5s" 
						  				swiper-animate-delay="2.7s">好学</span>
		  						</p>
		  						<p>
		  							<span class="ani"
						  				swiper-animate-effect="fadeInRight" 
						  				swiper-animate-duration="0.5s" 
						  				swiper-animate-delay="2.7s">乐观</span>
		  						</p>
			  				</div>
			  			</div>
			  		</div>
			  	</section>
			  	
			  	
			  	
			  	
			  </div>
			  <div class="swiper-slide s s2">
			  	<section class="banner-wrap">
			  		<img src="images/banner.jpg" alt="" width="100%"
				  		class="ani s1-banner"
				  		swiper-animate-effect="fadeInDown" 
				  		swiper-animate-duration="0.5s" 
				  		swiper-animate-delay="0.3s"	
				  	 />
				  	 <p class="ani banner-text" 
				  		swiper-animate-effect="fadeInUp" 
				  		swiper-animate-duration="0.5s" 
				  		swiper-animate-delay=".8s">
				  		<span class="ani"
				  			swiper-animate-effect="fadeInLeft" 
					  		swiper-animate-duration="0.5s" 
					  		swiper-animate-delay="1.2s">PERSONAL</span>
				  		<span class="ani"
				  			swiper-animate-effect="fadeInRight" 
					  		swiper-animate-duration="0.5s" 
					  		swiper-animate-delay="1.2s">RESUME</span>			  	 
				  	 </p>
				  	 <div class="header-card ani"
				  	 	swiper-animate-effect="fadeInUp" 
				  		swiper-animate-duration="1s" 
				  		swiper-animate-delay="1s">
				  	 	<p class="content">基本<br />信息</p>
				  	 	<div class="circle"></div>				  	 	
				  	 </div>
				  	 <div class="banner-wrap-footer ani" 
				  		swiper-animate-effect="fadeIn" 
				  		swiper-animate-duration="2s" 
				  		swiper-animate-delay="1s">
				  	 </div>
			  	</section>
			  	<section class="s-info">
			  		<img class="ani" src="images/s2/bg.png" width="100%" 
			  			swiper-animate-effect="flipInY" 
				  		swiper-animate-duration="1s" 
				  		swiper-animate-delay="1s"
			  		/>
			  		<div class="info-text ani">
			  			<ol>
				  			<li class="ani"
					  			swiper-animate-effect="fadeInRight" 
						  		swiper-animate-duration=".5s" 
						  		swiper-animate-delay="1.5s"
				  			><i class="text-dot"></i>
					  			<span>姓名: 刘鹏</span></li>
				  			<li class="ani"
					  			swiper-animate-effect="fadeInRight" 
						  		swiper-animate-duration=".5s" 
						  		swiper-animate-delay="1.7s"
				  			><i class="text-dot"></i>
					  			<span>年龄: 28</span></li>
				  			<li class="ani"
					  			swiper-animate-effect="fadeInRight" 
						  		swiper-animate-duration=".5s" 
						  		swiper-animate-delay="1.9s"
				  			><i class="text-dot"></i>
					  			<span>学历: 河南农业大学 | 本科</span></li>
				  		</ol>
				  		<hr class="ani"
					  			swiper-animate-effect="fadeIn" 
						  		swiper-animate-duration=".5s" 
						  		swiper-animate-delay="2s"
				  			 />
				  		<ol>
				  			<li class="ani"
					  			swiper-animate-effect="fadeInRight" 
						  		swiper-animate-duration=".5s" 
						  		swiper-animate-delay="2.1s"
				  			>
				  				<!--<i class="text-dot"></i>-->
					  			<span>电话: 15936282010</span>
					  		</li>
				  			<li class="ani"
					  			swiper-animate-effect="fadeInRight" 
						  		swiper-animate-duration=".5s" 
						  		swiper-animate-delay="2.3s"
				  			>
				  				<!--<i class="text-dot"></i>-->
					  			<span>邮箱: 123537656@qq.com</span></li>
				  			<li class="ani"
					  			swiper-animate-effect="fadeInRight" 
						  		swiper-animate-duration=".5s" 
						  		swiper-animate-delay="2.5s"
				  			>
				  				<!--<i class="text-dot"></i>-->
					  			<span>微信: 15936282010</span></li>
				  		</ol>
			  		</div>
			  		
			  	</section>
			  	<i class="c-block cb-red ani"
	  				swiper-animate-effect="fadeInDown" 
	  				swiper-animate-duration="1s" 
	  				swiper-animate-delay="2s"></i>
	  			<i class="c-block cb-yellow ani"
	  				swiper-animate-effect="fadeInRight" 
	  				swiper-animate-duration="1s" 
	  				swiper-animate-delay="2s"></i>
	  			<i class="c-block cb-blue ani"
	  				swiper-animate-effect="fadeInDown" 
	  				swiper-animate-duration="1s" 
	  				swiper-animate-delay="2s"></i>
	  			<i class="c-block cb-green ani"
	  				swiper-animate-effect="fadeInUp" 
	  				swiper-animate-duration="1s" 
	  				swiper-animate-delay="2s"></i>
			  </div>
			  <div class="swiper-slide s s3">
			  	<section class="banner-wrap">
			  		<img src="images/banner.jpg" alt="" width="100%"
				  		class="ani s1-banner"
				  		swiper-animate-effect="fadeInDown" 
				  		swiper-animate-duration="0.5s" 
				  		swiper-animate-delay="0.3s"	
				  	 />
				  	 <p class="ani banner-text" 
				  		swiper-animate-effect="fadeInUp" 
				  		swiper-animate-duration="0.5s" 
				  		swiper-animate-delay=".8s">
				  		<span class="ani"
				  			swiper-animate-effect="fadeInLeft" 
					  		swiper-animate-duration="0.5s" 
					  		swiper-animate-delay="1.2s">PERSONAL</span>
				  		<span class="ani"
				  			swiper-animate-effect="fadeInRight" 
					  		swiper-animate-duration="0.5s" 
					  		swiper-animate-delay="1.2s">RESUME</span>			  	 
				  	 </p>
				  	 <div class="header-card ani"
				  	 	swiper-animate-effect="fadeInUp" 
				  		swiper-animate-duration="1s" 
				  		swiper-animate-delay="1s">
				  	 	<p class="content">工作<br />经历</p>
				  	 	<div class="circle"></div>				  	 	
				  	 </div>
				  	 <div class="banner-wrap-footer ani" 
				  		swiper-animate-effect="fadeIn" 
				  		swiper-animate-duration="2s" 
				  		swiper-animate-delay="1s">
				  	 </div>
			  	</section>
			  	<section class="s3-info">
			  		<section class="line-item li1">
			  			<i class="line-grow lg1 ani" 
					  		swiper-animate-effect="linegrow" 
					  		swiper-animate-duration="1.5s" 
					  		swiper-animate-delay="2s"></i>
			  			<div class="li-text ani" 
					  		swiper-animate-effect="zoomIn" 
					  		swiper-animate-duration="1.5s" 
					  		swiper-animate-delay="3.5s">
			  				<strong>郑州云新</strong>
			  				<p>2015-2017</p>
			  			</div>
			  		</section>
			  		<section class="line-item li2">
			  			<i class="line-grow lg2 ani" 
					  		swiper-animate-effect="linegrow" 
					  		swiper-animate-duration="1.5s" 
					  		swiper-animate-delay="1.5s"></i>
			  			<div class="li-text ani" 
					  		swiper-animate-effect="zoomIn" 
					  		swiper-animate-duration="1.5s" 
					  		swiper-animate-delay="3s">
			  				<strong>中润文化</strong>
			  				<p>2017-2018</p>
			  			</div>
			  		</section>
			  		<section class="line-item li3">
			  			<i class="line-grow lg3 ani" 
					  		swiper-animate-effect="linegrow" 
					  		swiper-animate-duration="1.5s" 
					  		swiper-animate-delay="2.3s"></i>
			  			<div class="li-text ani" 
					  		swiper-animate-effect="zoomIn" 
					  		swiper-animate-duration="1.5s" 
					  		swiper-animate-delay="3.8s">
			  				<strong>鸿富锦<br />精密电子</strong>
			  				<p>2018至今</p>
			  			</div>
			  		</section>
			  		<section class="bg-text ani"
			  				swiper-animate-effect="zoomIn" 
					  		swiper-animate-duration="1s" 
					  		swiper-animate-delay="3s"
			  			>SOMETHING</section>
			  	</section>
			  	<section class="footer-img">
			  		<img src="images/s3/footer.png" width="100%" alt=""
			  			class="ani"
			  			swiper-animate-effect="fadeInUp" 
				  		swiper-animate-duration="1s" 
				  		swiper-animate-delay="2s" />
			  	</section>
			  </div>
			  <div class="swiper-slide s s2">
			  	<section class="banner-wrap">
			  		<img src="images/banner.jpg" alt="" width="100%"
				  		class="ani s1-banner"
				  		swiper-animate-effect="fadeInDown" 
				  		swiper-animate-duration="0.5s" 
				  		swiper-animate-delay="0.3s"	
				  	 />
				  	 <p class="ani banner-text" 
				  		swiper-animate-effect="fadeInUp" 
				  		swiper-animate-duration="0.5s" 
				  		swiper-animate-delay=".8s">
				  		<span class="ani"
				  			swiper-animate-effect="fadeInLeft" 
					  		swiper-animate-duration="0.5s" 
					  		swiper-animate-delay="1.2s">PERSONAL</span>
				  		<span class="ani"
				  			swiper-animate-effect="fadeInRight" 
					  		swiper-animate-duration="0.5s" 
					  		swiper-animate-delay="1.2s">RESUME</span>			  	 
				  	 </p>
				  	 <div class="header-card ani"
				  	 	swiper-animate-effect="fadeInUp" 
				  		swiper-animate-duration="1s" 
				  		swiper-animate-delay="1s">
				  	 	<p class="content">项目<br />经验</p>
				  	 	<div class="circle"></div>				  	 	
				  	 </div>
				  	 <div class="banner-wrap-footer ani" 
				  		swiper-animate-effect="fadeIn" 
				  		swiper-animate-duration="2s" 
				  		swiper-animate-delay="1s">
				  	 </div>
			  	</section>
			  	<section class="s-info">
			  		<img class="ani" src="images/s2/bg.png" width="100%" 
			  			swiper-animate-effect="flipInY" 
				  		swiper-animate-duration="1s" 
				  		swiper-animate-delay="1s"
			  			/>
			  		<div class="info-text ani">
			  			<ol>
				  			<li class="ani"
					  			swiper-animate-effect="fadeInRight" 
						  		swiper-animate-duration=".5s" 
						  		swiper-animate-delay="1.5s"
				  			><i class="text-dot"></i>
					  			<span>TPM资产管理系统</span></li>
				  			<li class="ani"
					  			swiper-animate-effect="fadeInRight" 
						  		swiper-animate-duration=".5s" 
						  		swiper-animate-delay="1.7s"
				  			><i class="text-dot"></i>
					  			<span>报表平台系统</span></li>
				  			<li class="ani"
					  			swiper-animate-effect="fadeInRight" 
						  		swiper-animate-duration=".5s" 
						  		swiper-animate-delay="1.9s"
				  			><i class="text-dot"></i>
					  			<span>生产看板系统</span></li>
				  		</ol>
				  		<hr class="ani"
					  			swiper-animate-effect="fadeIn" 
						  		swiper-animate-duration=".5s" 
						  		swiper-animate-delay="2s"
				  			 />
				  		<ol>
				  			<li class="ani"
					  			swiper-animate-effect="fadeInRight" 
						  		swiper-animate-duration=".5s" 
						  		swiper-animate-delay="2.1s"
				  			>
				  				<i class="text-dot"></i>
					  			<span>互动营销类 移动端web</span>
					  		</li>
				  			<li class="ani"
					  			swiper-animate-effect="fadeInRight" 
						  		swiper-animate-duration=".5s" 
						  		swiper-animate-delay="2.3s"
				  			><i class="text-dot"></i>
					  			<span>二手车_webapp</span></li>
				  			<li class="ani"
					  			swiper-animate-effect="fadeInRight" 
						  		swiper-animate-duration=".5s" 
						  		swiper-animate-delay="2.5s"
				  			><i class="text-dot"></i>
					  			<span>美粮商城</span></li>
					  			<li class="ani"
					  			swiper-animate-effect="fadeInRight" 
						  		swiper-animate-duration=".5s" 
						  		swiper-animate-delay="2.7s"
				  			><i class="text-dot"></i>
					  			<span>企业站_酷美饮品等</span></li>
				  		</ol>
			  		</div>
			  		
			  	</section>
			  	<i class="c-block cb-red ani"
	  				swiper-animate-effect="fadeInDown" 
	  				swiper-animate-duration="1s" 
	  				swiper-animate-delay="2s"></i>
	  			<i class="c-block cb-yellow ani"
	  				swiper-animate-effect="fadeInRight" 
	  				swiper-animate-duration="1s" 
	  				swiper-animate-delay="2s"></i>
	  			<i class="c-block cb-blue ani"
	  				swiper-animate-effect="fadeInDown" 
	  				swiper-animate-duration="1s" 
	  				swiper-animate-delay="2s"></i>
	  			<i class="c-block cb-green ani"
	  				swiper-animate-effect="fadeInUp" 
	  				swiper-animate-duration="1s" 
	  				swiper-animate-delay="2s"></i>
			  </div>
			  <div class="swiper-slide s s5">
			  	<section class="banner-wrap">
			  		<img src="images/banner.jpg" alt="" width="100%"
				  		class="ani s1-banner"
				  		swiper-animate-effect="fadeInDown" 
				  		swiper-animate-duration="0.5s" 
				  		swiper-animate-delay="0.3s"	
				  	 />
				  	 <p class="ani banner-text" 
				  		swiper-animate-effect="fadeInUp" 
				  		swiper-animate-duration="0.5s" 
				  		swiper-animate-delay=".8s">
				  		<span class="ani"
				  			swiper-animate-effect="fadeInLeft" 
					  		swiper-animate-duration="0.5s" 
					  		swiper-animate-delay="1.2s">PERSONAL</span>
				  		<span class="ani"
				  			swiper-animate-effect="fadeInRight" 
					  		swiper-animate-duration="0.5s" 
					  		swiper-animate-delay="1.2s">RESUME</span>			  	 
				  	 </p>
				  	 <div class="header-card ani"
				  	 	swiper-animate-effect="fadeInUp" 
				  		swiper-animate-duration="1s" 
				  		swiper-animate-delay="1s">
				  	 	<p class="content">专业<br />技能</p>
				  	 	<div class="circle"></div>				  	 	
				  	 </div>
				  	 <div class="banner-wrap-footer ani" 
				  		swiper-animate-effect="fadeIn" 
				  		swiper-animate-duration="2s" 
				  		swiper-animate-delay="1s">
				  	 </div>
			  	</section>
			  	<section class="s5-info">
			  		<section class="s5-line s5l1">
			  			<div 
		  					class="ani" 
					  		swiper-animate-effect="roateCircle" 
					  		swiper-animate-duration="2s" 
					  		swiper-animate-delay="1s"
		  					>
			  				<img src="images/s5/1.png" width="100%"/>
			  				<p>HTML</p>
			  			</div>
			  			<div 
		  					class="ani" 
					  		swiper-animate-effect="roateCircle" 
					  		swiper-animate-duration="2s" 
					  		swiper-animate-delay="1s"
		  					>
			  				<img src="images/s5/1.png" width="100%"/>
			  				<p>CSS</p>
			  			</div>
			  			<div 
		  					class="ani" 
					  		swiper-animate-effect="roateCircle" 
					  		swiper-animate-duration="2s" 
					  		swiper-animate-delay="1s"
		  					>
			  				<img src="images/s5/1.png" width="100%"/>
			  				<p>JS</p>
			  			</div>
			  		</section>
			  		<section class="s5-line s5l2">
			  			<p 
		  					class="ani" 
					  		swiper-animate-effect="zoomIn" 
					  		swiper-animate-duration="1s" 
					  		swiper-animate-delay="1.5s">NodeJS</p>
			  			<p 
		  					class="ani" 
					  		swiper-animate-effect="zoomIn" 
					  		swiper-animate-duration="1s" 
					  		swiper-animate-delay="1.7s">VUE</p>
			  			<p 
		  					class="ani" 
					  		swiper-animate-effect="zoomIn" 
					  		swiper-animate-duration="1s" 
					  		swiper-animate-delay="1.9s">JQuery</p>
			  			<p 
		  					class="ani" 
					  		swiper-animate-effect="zoomIn" 
					  		swiper-animate-duration="1s" 
					  		swiper-animate-delay="2.1s">Gulp</p>
			  		</section>
			  		<section class="s5-line s5l2">
			  			<p 
		  					class="ani" 
					  		swiper-animate-effect="zoomIn" 
					  		swiper-animate-duration="1s" 
					  		swiper-animate-delay="2.1s">LayUI</p>
			  			<p 
		  					class="ani" 
					  		swiper-animate-effect="zoomIn" 
					  		swiper-animate-duration="1s" 
					  		swiper-animate-delay="1.9s">Bootstrap</p>
			  			<p 
		  					class="ani" 
					  		swiper-animate-effect="zoomIn" 
					  		swiper-animate-duration="1s" 
					  		swiper-animate-delay="1.7s">ElementUI</p>
			  			<p 
		  					class="ani" 
					  		swiper-animate-effect="zoomIn" 
					  		swiper-animate-duration="1s" 
					  		swiper-animate-delay="1.5s">Swiper</p>
			  		</section>
			  	</section>
			  	<i class="c-block cb-red ani"
		  				swiper-animate-effect="slideInDown" 
		  				swiper-animate-duration="1s" 
		  				swiper-animate-delay="2s"></i>
		  		<i class="c-block cb-blue ani"
	  				swiper-animate-effect="slideInUp" 
	  				swiper-animate-duration="1s" 
	  				swiper-animate-delay="2s"></i>
		  		<i class="c-block cb-yellow ani"
	  				swiper-animate-effect="slideInDown" 
	  				swiper-animate-duration="1s" 
	  				swiper-animate-delay="2s"></i>
		  		<i class="c-block cb-green ani"
	  				swiper-animate-effect="slideInUp" 
	  				swiper-animate-duration="1s" 
	  				swiper-animate-delay="2s"></i>
	  			<section class="bg-text">不忘初心，勇往直前</section>
			  </div>
			</div>
			<!-- Add Scrollbar -->
			<img id="arr_up" src="images/arr_up.png" width="100%" alt="" />
		</div>
		
		<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
		<script type="text/javascript" src="js/swiper.min.js"></script>
		<script type="text/javascript" src="js/swiper.animate1.0.3.min.js"></script>
		
		<script type="text/javascript">
			var arr_up = document.getElementById('arr_up');
			var swiper = new Swiper('.swiper-container', {
		        direction : 'vertical',
		        loop: true,
		      	on:{
			      	init: function(){
			        	swiperAnimateCache(this); //隐藏动画元素 
			        	swiperAnimate(this); //初始化完成开始动画
			      	}, 
			      	slideChangeTransitionEnd: function(){ 
			        	swiperAnimate(this); //每个slide切换结束时也运行当前slide动画
			        	if(this.activeIndex == this.slides.length-2){
			        		arr_up.style.display = 'none'
			        	}else{
			        		arr_up.style.display = 'block'
			        	}
			      	} 
			    }
		    });
		</script>
	</body>
</html>
